---
import  astroLogo from '../assets/Pokeman.svg';
---
<style>
.sidebar {
  position: sticky;
  top: 32px;
  width: 260px;
  height: 60vh;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 4px 32px 0 rgba(0,0,0,0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0 24px 0;
  margin-left:368px ;
  transition: height 0.3s, box-shadow 0.2s;
  transition: all 0.3s ease; 
}
.sidebar.sidebar--expanded {
  height: 80vh;
}
.logo {
  width: 110px;
  margin-bottom: 18px;
}
.signature {
  color: #888;
  font-size: 0.98rem;
  margin-bottom: 32px;
  letter-spacing: 1px;
}
.menu {
  flex: 0 0 auto; /* 不要撑满父容器 */
  width: 88%;
  margin-bottom: 12px; /* 原来可能是32px或更大，改小 */
}
.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu li,
.menu .menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  border-radius: 18px;
  font-size: 1.13rem;
  font-weight: bold;
  color: #222;
  cursor: pointer;
  border: none;
  background: none;
  margin: 10px 0;
  padding: 0;
  transition: none;
}

.menu .menu-item,
.menu li > a {
  padding: 10px 18px;
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 18px;
  border: 1.5px solid transparent;
  background: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-decoration: none;
  box-sizing: border-box;
  transition: background 0.18s, color 0.18s, border 0.18s;
}

.menu .menu-item:hover,
.menu li > a:hover,
.has-submenu.active .menu-item {
  background: #e6f0ff;
  color: #0070f3;
  border: 1.5px solid #b3d8fd;
}
.menu svg {
  width: 22px;
  height: 22px;
  margin-right: 14px;
  fill: #888;
  flex-shrink: 0;
  display: block;
  transition: fill 0.18s;
}
.menu .menu-item:hover svg,
.has-submenu.active .menu-item svg,
.menu li:hover > a > svg {
  fill: #0070f3;
}
.social {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 32px;
}
.social a {
  color: #888;
  font-size: 1.6rem;
  border-radius: 50%;
  padding: 8px;
  transition: background 0.18s, color 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.social a:hover {
  background: #e6f0ff;
  color: #0070f3;
}
.divider {
  width: 80%;
  height: 1.5px;
  background: #f0f0f0;
  border: 1px solid #f0f0f0;
}
.social svg{
  width: 20px;
  height: 22px;
}
a{
  text-decoration: none;
  color: inherit;
}
.has-submenu {
  position: relative;
  flex-direction: column;
}

.has-submenu .menu-item {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.submenu {
  list-style: none;
  padding: 0 0 0 36px;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background: none;
  border: none;
}

.submenu li {
  padding: 8px 0;
  font-size: 0.98rem;
  font-weight: normal;
  color: #555;
  border: none;
  margin: 0;
}

.submenu a {
  color: inherit;
  text-decoration: none;
  display: block;
  transition: all 0.2s;
  padding: 4px 0;
}

.submenu a:hover {
  color: #0070f3;
  padding-left: 8px;
}

/* 点击后展开的样式 */
.has-submenu.active .submenu {
  max-height: 200px;
  padding: 4px 0 8px 0;
}

.has-submenu.active .dropdown-icon {
  transform: rotate(180deg);
}

/* 下拉箭头样式 */
.dropdown-icon {
  margin-left: auto;
  font-size: 0.7em;
  transition: transform 0.2s;
  color: #888;
}

/* 菜单项悬停效果 */
.has-submenu.active .menu-item,
.menu .menu-item:hover {
  background: #e6f0ff;
  color: #0070f3;
  border: 1.5px solid #b3d8fd;
}

.menu .dropdown-icon {
  margin-left: 10px;
  font-size: 1em;
  color: #888;
  display: flex;
  align-items: center;
  transition: transform 0.2s;
}
.has-submenu.active .dropdown-icon {
  transform: rotate(180deg);
}

/* 子菜单项悬停效果 */
.submenu li:hover {
  background: transparent;
}

/* 主菜单项 */
.menu li,
.menu .menu-item,
.menu li > a {
  color: #222;         /* 主菜单深色 */
  font-weight: bold;   /* 主菜单加粗 */
}

/* 子菜单项 */
.submenu li,
.submenu a {
  color: #888;         /* 子菜单浅灰色 */
  font-weight: normal; /* 子菜单不加粗 */
  font-size: 0.98rem;  /* 子菜单略小 */
}

/* 子菜单悬浮时高亮 */
.submenu a:hover {
  color: #0070f3;
  padding-left: 8px;
}
  </style>
<script is:inline>
  function updateSidebarHeight() {
    const sidebar = document.querySelector('.sidebar');
    const hasActive = document.querySelector('.has-submenu.active');
    if (sidebar) {
      if (hasActive) {
        sidebar.classList.add('sidebar--expanded');
      } else {
        sidebar.classList.remove('sidebar--expanded');
      }
    }
  }

  function toggleSubmenu(parent) {
    document.querySelectorAll('.has-submenu').forEach(item => {
      if (item !== parent) {
        item.classList.remove('active');
      }
    });
    parent.classList.toggle('active');
    updateSidebarHeight();
  }

  document.addEventListener('click', function(e) {
    const target = e.target;
    if (!target || !target.closest('.has-submenu')) {
      document.querySelectorAll('.has-submenu').forEach(item => {
        item.classList.remove('active');
      });
      updateSidebarHeight();
    }
  });
</script>

<aside class="sidebar">
  <img src={astroLogo.src} alt="Logo" class="logo" />
  <nav class="menu">
    <ul>
      <li><a href="/"><svg><use xlink:href="#icon-home"/></svg> Home</a></li>
      <li><a href="/About"><svg><use xlink:href="#icon-info"/></svg> About</a></li>
      <li class="has-submenu">
        <div class="menu-item" onclick="toggleSubmenu(this.parentElement)">
          <svg><use xlink:href="#icon-book"/></svg>
          <span>Blogs</span>
          <span class="dropdown-icon">▼</span>
        </div>
        <ul class="submenu">
          <li><a href="/blogs/all">All blogs</a></li>
          <li><a href="/blogs/tech">Tech blogs</a></li>
          <li><a href="/blogs/life">Life blogs</a></li>
        </ul>
      </li>
      <li><a><svg><use xlink:href="#icon-code"/></svg> Project</a></li>
      <li><a><svg><use xlink:href="#icon-user"/></svg> Friend</a></li>
      <li><a><svg><use xlink:href="#icon-mail"/></svg> Contact</a></li>
    </ul>
  </nav>
  <div class="divider"></div>
  <div class="social">
    <a href="#"><svg><use xlink:href="#icon-coffee"/></svg></a>
    <a href="#"><svg><use xlink:href="#icon-github"/></svg></a>
    <a href="#"><svg><use xlink:href="#icon-bilibili"/></svg></a>
    <a href="#"><svg><use xlink:href="#icon-twitter"/></svg></a>
  </div>
</aside>

  
    <!-- SVG 图标定义 -->
    <svg style="display:none;">
      <symbol id="icon-home" viewBox="0 0 24 24"><path d="M3 12l9-9 9 9h-3v9h-12v-9h-3z"/></symbol>
      <symbol id="icon-info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><rect x="11" y="10" width="2" height="6"/><rect x="11" y="7" width="2" height="2"/></symbol>
      <symbol id="icon-book" viewBox="0 0 24 24"><path d="M4 19.5a2.5 2.5 0 0 1 2.5-2.5h13"/><path d="M20.5 21.5v-17a2.5 2.5 0 0 0-2.5-2.5h-13a2.5 2.5 0 0 0-2.5 2.5v17"/></symbol>
      <symbol id="icon-code" viewBox="0 0 24 24"><path d="M16 18l6-6-6-6"/><path d="M8 6l-6 6 6 6"/></symbol>
      <symbol id="icon-user" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 20v-2a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v2"/></symbol>
      <symbol id="icon-mail" viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 6l-10 7L2 6"/></symbol>
      <symbol id="icon-coffee" viewBox="0 0 24 24"><path d="M18 8h1a4 4 0 0 1 0 8h-1"/><path d="M2 8h16v8a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/></symbol>
      <symbol id="icon-github" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.58 2 12.26c0 4.5 2.87 8.32 6.84 9.67.5.09.68-.22.68-.48 0-.24-.01-.87-.01-1.7-2.78.62-3.37-1.36-3.37-1.36-.45-1.18-1.1-1.5-1.1-1.5-.9-.63.07-.62.07-.62 1 .07 1.53 1.05 1.53 1.05.89 1.56 2.34 1.11 2.91.85.09-.66.35-1.11.63-1.37-2.22-.26-4.56-1.14-4.56-5.07 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.3.1-2.7 0 0 .84-.28 2.75 1.05A9.38 9.38 0 0 1 12 6.8c.85.004 1.71.115 2.51.337 1.91-1.33 2.75-1.05 2.75-1.05.55 1.4.2 2.44.1 2.7.64.72 1.03 1.63 1.03 2.75 0 3.94-2.34 4.81-4.57 5.07.36.32.68.94.68 1.9 0 1.37-.01 2.47-.01 2.81 0 .27.18.58.69.48A10.01 10.01 0 0 0 22 12.26C22 6.58 17.52 2 12 2z"/></symbol>
      <symbol id="icon-bilibili" viewBox="0 0 24 24"><path d="M4 7h16v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7zm2-3l2 3m8-3l-2 3"/></symbol>
      <symbol id="icon-twitter" viewBox="0 0 24 24"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53A4.48 4.48 0 0 0 22.4 1.64a9.09 9.09 0 0 1-2.88 1.1A4.52 4.52 0 0 0 16.11 0c-2.5 0-4.52 2.02-4.52 4.52 0 .35.04.7.11 1.03A12.94 12.94 0 0 1 3.1.67a4.52 4.52 0 0 0-.61 2.27c0 1.56.8 2.94 2.02 3.75A4.48 4.48 0 0 1 2 6.13v.06c0 2.18 1.55 4 3.8 4.42a4.52 4.52 0 0 1-2.04.08c.57 1.77 2.23 3.06 4.2 3.1A9.06 9.06 0 0 1 0 19.54a12.8 12.8 0 0 0 6.95 2.04c8.34 0 12.9-6.91 12.9-12.9 0-.2 0-.39-.01-.58A9.22 9.22 0 0 0 23 3z"/></symbol>
    </svg>